<div class="ms-frame" ng-controller="PublicIdCtrl" >
  <!-- header -->
  <div class="frame-h">
    <div class="frame-h-act">
      <a ui-sref="home" class="frame-h-act-btn ms-back-btn"></a>
    </div>
    <h3 class="frame-h-ctx">Create Public ID</h3>
    <div class="frame-h-act-rt">
      <a ui-sref="home" class="frame-h-act-btn ms-home-btn"></a>
    </div>
  </div><!-- /header -->
  <!-- content 1 -->
  <div class="content-1">
    <h3 class="content-1-h">Create Your Public ID</h3>
    <p class="content-1-p">
      The ID you create will be your SAFE Network Public ID.  <br/>
      This will be used on all the apps and services on the network. Pick a good one ;)
    </p>
  </div><!-- /content 1 -->

  <!-- create public ID form -->
  <div class="ms-form" ng-init="init()">
    <form id="createPublicID" name="createPublicID" ng-submit="createPublicId()">
      <div class="form-grp drk">
        <input type="text" name="publicID" required="required" placeholder="Public ID" ng-model="publicId" focus="true">
      </div>
    </form>
  </div><!-- create public ID form -->
  <div class="container-3">
    <p class="heading-sm">
      This is how your Public ID will look in the browser.
    </p>
  </div><!-- /content 1 -->
  <div class="service-preview">
    <span class="service-preview-ctx">safe://&lt;service name&gt;.<b>{{(publicId ? publicId : '&lt;public id&gt;')}}</b></span>
  </div>
  <div class="container-2 text-center">
    <button type="submit" class="ms-btn ms-primary-btn" form="createPublicID" ng-disabled="!publicId" name="submitPublicID">Done</button>
  </div>
</div>
